<template>
	<view class="h-30 w-100 flex align-center justify-end" @click="showPopup">
		<text v-if="value">{{ value }}</text>
		<text v-else class="gray9">不需要预约</text>
		<uni-icons :size="16" color="#bbb" type="arrowright" class="pr-2" />
	</view>
	<uni-popup ref="popupRef" background-color="#fff">
		<view class="py-13 w-100 text-center text-18 relative">
			设置项目预约信息
			<view @click="closePopup" class="absolute w-45 h-45 flex align-center justify-center" style="right: 0; top: 0;">
				<uni-icons type="closeempty" color="#c7c7c7" :size="24"></uni-icons>
			</view>
		</view>
		<view class="gray7 text-center pb-8 text-14">可对项目设置预约信息进行展示</view>
		<view class="px-20 border-top mt-20">
			<view class="border-bottom py-8 flex justify-between align-center">
				<text>是否需要预约</text>
				<form-switch v-model="formData.canReserve" />
			</view>
			<view class="py-8 flex align-center" v-show="formData.canReserve">
				<text class="text-bold">请提前</text>
				<view class="border-bottom" style="width: 40%;">
					<form-number v-model="formData.reserveTime" :data="{ placeholder: '请输入数字', min: 1, max: 999999, step: 1, clearIcon: false }"></form-number>
				</view>
				<view class="unit-select-height flex-1 border-bottom ml-8">
					<picker :value="unitIndex" :range="unitArray" @change="changeUnit">
						<view class="h-31 flex align-center justify-center gray9" v-if="isEmpty(unitIndex)">请选择</view>
						<view class="h-31 flex align-center justify-center" v-else>{{ unitArray[unitIndex] }}</view>
					</picker>
				</view>
				<text class="text-bold">预约</text>
			</view>
			<view class="pt-60 mt-60 pb-10">
				<my-button
					@click="submit"
					type="primary"
					shape="circle"
					class="mb-10"
					:disabled="formData.canReserve && (isEmpty(formData.reserveTime) || isEmpty(formData.reserveTimeUnit))"
				>
					确认
				</my-button>
				<!-- <my-button @click="cancel" type="white" shape="circle" link :size="24" class="mt-10" v-if="!isEmpty(priceValue)">取消新客价</my-button> -->
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue'
import { isEmpty, toast } from '@/assets/js/utils'

const props = defineProps({
	//表单组件参数
	data: {
		type: Object,
		required: true
	},
	modelValue: {}
})

watch(props, (val: any) => {
	init()
})

const init = () => {
	if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length == 4) {
		formData.value.canReserve = props.modelValue[0]
		formData.value.reserveTimeUnit = props.modelValue[1]
		formData.value.reserveTime = props.modelValue[2]
		let index = unitArray.value.findIndex(item => {
			return item == formData.value.reserveTimeUnit
		})
		unitIndex.value = index
		value.value = `请提前${formData.value.reserveTime}${formData.value.reserveTimeUnit}预约`
	} else {
		formData.value.canReserve = false
		formData.value.reserveTimeUnit = ''
		formData.value.reserveTime = ''
		unitIndex.value = undefined
		value.value = undefined
	}
}

const value = ref()
const formData = ref({
	canReserve: false, //是否需要续约
	reserveTimeUnit: '', //预约时间单位
	reserveTime: '' //预约时间数值
})
//选择时间单位
const unitArray = ref(['天', '小时', '分钟'])
const unitIndex = ref()
const changeUnit = (val: any) => {
	formData.value.reserveTimeUnit = unitArray.value[val.detail.value]
	unitIndex.value = val.detail.value
}

//修改双向绑定值
const emit = defineEmits(['update:modelValue'])
const submit = () => {
	let returnValue: any
	if (formData.value.canReserve) {
		value.value = `请提前${formData.value.reserveTime}${formData.value.reserveTimeUnit}预约`
		returnValue = [
			formData.value.canReserve,
			formData.value.reserveTimeUnit,
			formData.value.reserveTime,
			formatMinute(formData.value.reserveTime, formData.value.reserveTimeUnit)
		]
	} else {
		value.value = ''
		returnValue = ''
	}
	emit('update:modelValue', returnValue)
	closePopup()
}

//根据时间单位转换成分钟数
const formatMinute = (time: any, unit: string) => {
	let timeNumber: number
	if (unit == '天') {
		timeNumber = time * 1440
	} else if (unit == '小时') {
		timeNumber = time * 60
	} else {
		timeNumber = time
	}
	return timeNumber
}

const popupRef = ref()

//打开popup
const showPopup = () => {
	init()
	popupRef.value.open('bottom')
}
//关闭popup
const closePopup = () => {
	popupRef.value.close()
}
</script>

<style lang="scss">
.unit-select-height {
	height: 66rpx;
}
</style>
